<template>
  <van-nav-bar title="商品分类" :fixed="true"/>
  
  <div class="container">
    <!-- 侧栏 -->
    <van-collapse v-model="active" accordion ski>
      <van-collapse-item
        v-for="items in store.categories"
        :title="items.name"
        :name="items.id"
        :disabled="items.children.length === 0 ? true : false"
        >
          <div
            v-for="item in items.children"
            class="children"
            @click="store.handleCategory(item.id)"
            >
            {{item.name}}
          </div>
      </van-collapse-item>
    </van-collapse>
    <!-- 主体内容 -->
    <van-tabs v-model="active1" @click-tab="store.handleSort">
        <van-tab title="销量排序" name="sales"></van-tab>
        <van-tab title="价格排序" name="price"></van-tab>
        <div class="goodList">
          <van-card
            v-for="item in store.goods.data"
            tag="精品"
            :title="item.title"
            :thumb="item.cover_url"
            @click="router.push({name: 'detail',params:{id:item.id}})"
            >
            <template #desc>
              <div class="price">&yen;{{item.price}}</div>
            </template>
            <template #num>
              <span>商品销量</span>
              <span>x{{item.sales}}</span>
            </template>
          </van-card>
        </div>
    </van-tabs>

  </div>
</template>
    
<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useGoodListStore } from '@/store/goods';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router'

  const router = useRouter()
  // 使用 pinia
  let store = useGoodListStore()
  let { categories } = storeToRefs(store)
    
  let active = ref(0)
  let active1 = ref(0)
  onMounted(() => {
    store.getGoodList()
  })
</script>
    
<style scoped lang="less">
.container {
  display: flex;
  padding: 10px;
  .van-collapse {
    margin-top: 76px;
    width: 35%;
  .children {
    padding: 0;
    margin-bottom: 20px;
    &:last-of-type {
    margin: 0;
    }
  }
  }
  .van-tabs {
    margin-top: 46px;
    width: 65%;
    .goodList {
      .price {
        font-size: 22px;
        color: red;
        margin-top: 10px;
      }
      /deep/ .van-card__bottom {
        margin-bottom: 10px;
        .van-card__num {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>